<template>
  <div>
    <el-form :inline="true">
      <el-form-item label="下单时间:">
        <el-date-picker
          v-model="transactTime"
          type="date"
          placeholder="选择日期"
        />
        <span>至</span>
        <el-date-picker
          v-model="transactTimeEnd"
          type="date"
          placeholder="选择日期"
        />
      </el-form-item>
      <el-form-item label="订单状态:" prop="orderStatusSource">
        <el-select
          v-model="orderStatusSource"
          clearable
          multiple
          collapse-tags
          placeholder="请选择订单状态"
        >
          <el-option
            v-for="ele in orderStatusMap"
            :key="ele.value"
            :label="ele.desc"
            :value="ele.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="处理人:">
        <el-input v-model.trim="ownerName" clearable />
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="getData">查询</el-button>
    </el-form>
    <lb-table
      ref="lbTable"
      border
      highlight-current-row
      element-loading-text="加载中"
      :column="tableData.column"
      :data="tableData.data"
      height="60vh"
      pagination
      :total="tableData.total"
      @fetch="getData"
    />
    <order-detail
      ref="orderDetail"
      :payment-method-map="paymentMethodMap"
      :pay-status-map="payStatusMap"
      :transactor-list="transactorList"
      :order-flag-map="orderFlagMap"
      :order-source-map="orderSourceMap"
      :order-status-map="orderStatusMap"
    />
  </div>
</template>

<script>
  import { fromPlatColMap } from '@/utils/map'
  import { formatColumnMap, parseTime } from '@/utils'
  import moment from 'dayjs'
  import { customerCustomerorder, queryMap, queryTransactorList } from '@/api'
  import { mergeAsyncFunc } from '@/utils/mergeAsyncFunc'
  import OrderDetail from '../../orderCenter/orderManage/components/OrderDetails.vue'

  export default {
    name: 'tab-history',
    components: { OrderDetail },
    props: ['csmId'],
    data() {
      return {
        transactTime: moment().subtract(3, 'M').startOf('M'),
        transactTimeEnd: '',
        ownerName: '',
        orderStatusSource: [],
        tableData: {
          column: [

            {
              label: '订单号',
              prop: 'orderCode',
              width: 100,
              render: (h, { row }) => (
              <el-link underline={false} onClick={() => this.openOrderDetail(row)}>
                {row.orderCode}
              </el-link>)
            },
            { label: '订单来源', prop: 'fromPlat', width: 100, align: 'center',
              render: (h, { row }) => <span>{ row.fromPlat && fromPlatColMap[row.fromPlat] }</span>
            },
            {
              prop: 'orderStatus',
              label: '订单状态',
              render: (h, { row }) => (
            <span>
              {row.orderStatus &&
                formatColumnMap(this.orderStatusMap, 'value', row.orderStatus, 'desc')}
            </span>
          )
            },
            { label: '处理人', prop: 'ownerName', width: 100, align: 'center' },
            { label: '联系人', prop: 'contact', width: 100, align: 'center' },
            { label: '联系电话', prop: 'contactPhone', width: 120, align: 'center' },
            { label: '送气地址', prop: 'csmAddress', width: 250, align: 'left' },
            { label: '商品描述', prop: 'goodsDesc', width: 180 },
            { label: '商品数量', prop: 'goodsCount', width: 80, align: 'right' },
            { label: '下单时间', prop: 'transactTime', width: '', align: 'center',
              render: (h, { row }) => <span>{ row.transactTime && parseTime(row.transactTime, '{y}-{m}-{d} {h}:{i}:{s}') }</span>
            },
            { label: '实收金额', prop: 'taccReceivable', width: 80, align: 'center' }
          ],
          data: []
        },
        paymentMethodMap: [],
        payStatusMap: [],
        transactorList: [],
        orderFlagMap: [],
        orderSourceMap: [],
        orderStatusMap: []
      }
    },
    mounted() {
      this.queryOptionsMap()
      this.getTransactorList()
    },
    methods: {
      // 查询枚举
      async queryOptionsMap() {
        const [res1, res2, res3, res4, res5, res6, res7] = await Promise.all([
          mergeAsyncFunc(queryMap, { enumName: 'OrderStatus' }),
          mergeAsyncFunc(queryMap, { enumName: 'OrderFlag' }),
          mergeAsyncFunc(queryMap, { enumName: 'CustomerType' }),
          mergeAsyncFunc(queryMap, { enumName: 'PayStatus' }),
          mergeAsyncFunc(queryMap, { enumName: 'PaymentMethod' }),
          mergeAsyncFunc(queryMap, { enumName: 'ReStatus' }),
          mergeAsyncFunc(queryMap, { enumName: 'OrderSource' })
        ])
        this.orderStatusMap = res1.data.filter((item) => item.value !== 6) // 订单类型(去掉‘已转派’)
        this.orderFlagMap = res2.data // 订单类型
        this.customerTypeMap = res3.data // 客户类型
        this.payStatusMap = res4.data // 支付状态
        this.paymentMethodMap = res5.data.filter(item => item.value === 1 || item.value === 2 || item.value === 16 || item.value === 128 || item.value === 256 || item.value === 2048) // 支付方式
        this.reStatusMap = res6.data // 回执状态
        this.orderSourceMap = res7.data // 订单来源
      },
      // 获取下单人列表
      async getTransactorList() {
        const res = await queryTransactorList({})
        this.transactorList = res.data
      },
      async getData({ currentPage = 1, pageSize = 20 }) {
        const params = {
          currentPage,
          pageSize,
          csmId: String(this.csmId),
          'orderStatusSource': this.orderStatusSource,
          'transactTime': this.transactTime,
          'transactTimeEnd': this.transactTimeEnd,
          'ownerName': this.ownerName
        }
        const res = await customerCustomerorder(params)
        this.tableData.data = res.data.rows
        if (currentPage === 1) this.tableData.total = res.data.total
      },
      // 点击订单号
      async openOrderDetail(row) {
        await this.$refs.orderDetail.open(row, true)
      }
    }
  }
</script>

<style scoped>

</style>
